<template>
	<div class="vehicle-panel">
		<div class="dispatch-title">
			<div class="title-main">调配</div>
			<div class="route-info">
				<div class="route-points">
					<div class="point">
						<div class="point-icon start">起</div>
						<span>雪厂J站场</span>
					</div>
					<div class="point end">
						<div class="point-icon end">终</div>
						<span>黑龙 (废干)</span>
					</div>
				</div>
				<div class="dispatch-info">
					<span class="info-item">需求趟次：5车次</span>
					<span class="info-item">物料类型：废干</span>
				</div>
			</div>
		</div>

		<div class="panel-header">
			<div class="location-info">
				<div class="location-detail">
					<span>距离: 13km</span>
					<span>运费: 2007元/趟</span>
				</div>
			</div>
			<div class="filter-options">
				<div class="checkbox-group">
					<el-checkbox v-model="filterOptions.showEmptyVehicles"
						>空闲车辆</el-checkbox
					>
					<el-checkbox v-model="filterOptions.showOccupiedVehicles"
						>在途车辆</el-checkbox
					>
				</div>
				<div class="battery-filters">
					<div class="battery-title">电量：</div>
					<div class="battery-checkboxes">
						<el-checkbox v-model="batteryFilters.high">大于80%</el-checkbox>
						<el-checkbox v-model="batteryFilters.medium">大于60%</el-checkbox>
						<el-checkbox v-model="batteryFilters.low">大于40%</el-checkbox>
						<el-checkbox v-model="batteryFilters.all">全部</el-checkbox>
					</div>
				</div>
			</div>
			<div class="search-section">
				<div class="search-box">
					<el-input
						placeholder="车牌号/司机名称"
						v-model="searchKeyword"
						clearable
					>
						<template #append>
							<el-button :icon="Search" @click="handleSearch">查询</el-button>
						</template>
					</el-input>
				</div>
				<div class="distance-actions">
					<div class="distance-filter">
						<el-radio-group v-model="distanceFilter" size="small">
							<el-radio-button label="3km">3km内</el-radio-button>
							<el-radio-button label="5km">5km内</el-radio-button>
							<el-radio-button label="10km">10km内</el-radio-button>
							<el-radio-button label="all">全部</el-radio-button>
						</el-radio-group>
					</div>
					<el-button type="primary" @click="handleQuickDispatch"
						>一键派单</el-button
					>
				</div>
			</div>
		</div>

		<div class="vehicle-list">
			<div
				v-for="vehicle in vehicles"
				:key="vehicle.plateNo"
				class="vehicle-card"
				:class="{ active: selectedVehicle === vehicle.plateNo }"
			>
				<div class="card-header">
					<span class="plate-number">{{ vehicle.plateNo }}</span>
					<div
						class="status-tag"
						:class="{ 'in-transit': vehicle.status === '在途' }"
					>
						{{ vehicle.status }}
					</div>
					<div class="call-button">
						<el-button
							type="primary"
							circle
							size="small"
							:icon="Phone"
						></el-button>
					</div>
				</div>
				<div class="card-body">
					<div class="driver-info">
						<span>司机姓名: {{ vehicle.driverName }}</span>
					</div>
					<div class="vehicle-info">
						<span>距离: {{ vehicle.distance }}KM</span>
						<div class="battery-info">
							<span>当前电量:</span>
							<div class="battery-progress">
								<div
									class="battery-bar"
									:style="{ width: vehicle.battery + '%' }"
								></div>
							</div>
							<span>{{ vehicle.battery }}%</span>
						</div>
					</div>
					<div v-if="vehicle.returnTime" class="last-update">
						<span>返程时间: {{ vehicle.returnTime }}</span>
					</div>
				</div>
				<div class="card-footer">
					<el-button
						size="small"
						:type="vehicle.status === '在途' ? 'warning' : 'primary'"
						@click.stop="dispatchVehicle(vehicle.plateNo)"
					>
						{{ vehicle.status === '在途' ? '待确' : '调派' }}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Phone } from '@element-plus/icons-vue';

const emit = defineEmits(['dispatch-vehicle', 'quick-dispatch', 'search']);

// 搜索关键字
const searchKeyword = ref('');
const distanceFilter = ref('5km');

// 筛选选项
const filterOptions = reactive({
	showEmptyVehicles: true,
	showOccupiedVehicles: true,
});

// 电量筛选
const batteryFilters = reactive({
	high: false,
	medium: false,
	low: false,
	all: true,
});

// 已选中的车辆
const selectedVehicle = ref(null);

// 模拟车辆数据 - 实际使用时应该通过props传入
const vehicles = ref([
	{
		plateNo: '川A00515D',
		status: '空闲',
		driverName: '张三',
		distance: '3',
		battery: 90,
	},
	{
		plateNo: '川A00566D',
		status: '在途',
		driverName: '张三',
		distance: '93',
		battery: 80,
		returnTime: '2025-5-3 10:30:27',
	},
]);

// 搜索车辆
const handleSearch = () => {
	emit('search', searchKeyword.value);
};

// 调派车辆
const dispatchVehicle = (plateNo) => {
	emit('dispatch-vehicle', plateNo);
};

// 一键派单
const handleQuickDispatch = () => {
	ElMessageBox.confirm('确认要一键派单给所有符合条件的车辆吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			emit('quick-dispatch');
		})
		.catch(() => {});
};
</script>

<style lang="scss" scoped>
.vehicle-panel {
	width: 380px;
	display: flex;
	flex-direction: column;
	border-left: 1px solid #e4e7ed;
	background: #fff;
	height: 100%;
	overflow: hidden;

	.dispatch-title {
		padding: 12px 15px;
		border-bottom: 1px solid #e4e7ed;
		background: #f5f7fa;

		.title-main {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 8px;
			color: #303133;
		}

		.route-info {
			.route-points {
				margin-bottom: 8px;
				display: flex;
				align-items: center;
				gap: 8px;

				.point {
					position: relative;
					padding-left: 24px;
					color: #606266;
					font-size: 14px;

					.point-icon {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 20px;
						height: 20px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 12px;

						&.start {
							background-color: #409eff;
						}

						&.end {
							background-color: #67c23a;
						}
					}

					&.end {
						margin-left: 15px;

						&::before {
							content: '';
							position: absolute;
							left: -15px;
							top: 50%;
							width: 12px;
							height: 1px;
							background-color: #dcdfe6;
						}
					}
				}
			}

			.dispatch-info {
				display: flex;
				gap: 15px;
				color: #f56c6c;
				font-size: 13px;

				.info-item {
					display: inline-block;
				}
			}
		}
	}

	.panel-header {
		padding: 12px 15px;
		border-bottom: 1px solid #e4e7ed;

		.location-info {
			margin-bottom: 12px;

			.location-detail {
				color: #666;
				display: flex;
				gap: 15px;
				font-size: 13px;
			}
		}

		.filter-options {
			margin-bottom: 12px;

			.checkbox-group {
				display: flex;
				gap: 20px;
				margin-bottom: 8px;
			}

			.battery-filters {
				.battery-title {
					margin-bottom: 4px;
					font-size: 13px;
				}

				.battery-checkboxes {
					display: flex;
					flex-wrap: wrap;
					gap: 10px;
				}
			}
		}

		.search-section {
			.search-box {
				margin-bottom: 8px;
			}

			.distance-actions {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8px;

				.distance-filter {
					flex: 1;

					:deep(.el-radio-group) {
						display: flex;

						.el-radio-button {
							flex: 1;

							.el-radio-button__inner {
								width: 100%;
							}
						}
					}
				}

				.el-button {
					margin-left: 8px;
					background-color: #4e6ef2;
					border-color: #4e6ef2;
				}
			}
		}
	}

	.vehicle-list {
		flex: 1;
		overflow-y: auto;
		padding: 8px;
		height: calc(100% - 180px);

		.vehicle-card {
			border: 1px solid #e4e7ed;
			border-radius: 4px;
			padding: 10px;
			margin-bottom: 8px;
			background: #fff;
			position: relative;

			&:hover {
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}

			&.active {
				border-color: #409eff;
				background-color: #ecf5ff;
			}

			.card-header {
				display: flex;
				align-items: center;
				margin-bottom: 12px;
				position: relative;

				.plate-number {
					font-weight: bold;
					flex: 1;
					font-size: 14px;
				}

				.status-tag {
					padding: 2px 8px;
					border-radius: 2px;
					font-size: 12px;
					margin-right: 40px;
					background: #67c23a;
					color: #fff;
					position: absolute;
					right: 0;

					&.in-transit {
						background: #e6a23c;
					}
				}

				.call-button {
					position: absolute;
					right: -5px;
					top: -5px;
				}
			}

			.card-body {
				font-size: 13px;
				color: #666;

				.driver-info {
					margin-bottom: 8px;
				}

				.vehicle-info {
					display: flex;
					flex-direction: column;
					gap: 8px;

					.distance-info {
						display: flex;
						align-items: center;
					}

					.battery-info {
						display: flex;
						align-items: center;
						gap: 8px;

						.battery-label {
							min-width: 60px;
						}

						.battery-progress {
							flex: 1;
							height: 8px;
							background: #f0f0f0;
							border-radius: 4px;
							overflow: hidden;
							position: relative;

							.battery-bar {
								height: 100%;
								background: #67c23a;
								transition: width 0.3s ease;
							}

							.battery-text {
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);
								font-size: 12px;
								color: #606266;
								padding-right: 5px;
							}
						}
					}
				}
			}

			.card-footer {
				display: flex;
				justify-content: flex-end;
				margin-top: 8px;

				.el-button {
					padding: 5px 12px;
					font-size: 12px;

					&.button-dispatch {
						background-color: #4e6ef2;
						border-color: #4e6ef2;
					}

					&.button-waiting {
						background-color: #e6a23c;
						border-color: #e6a23c;
					}
				}
			}
		}
	}
}
</style>
